import { useState, useEffect, useCallback } from 'react';

// 自定义 Hook 用于实现值的防抖
export const useDebounce = (value, delay) => {
    // 状态用于存储防抖后的值
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        // 设置一个定时器，在延迟后更新防抖值
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        // 如果组件卸载或值发生变化时清除定时器
        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
};

// 自定义 Hook 用于实现回调函数的防抖
export const useDebounceCallback = (callback, delay, dependencies) => {
    const [timerId, setTimerId] = useState(null);
    const [isFirstCall, setIsFirstCall] = useState(true);

    const debouncedCallback = useCallback((...args) => {
        if (isFirstCall) {
            // 首次调用立即执行
            callback(...args);
            setIsFirstCall(false);
        } else {
            // 后续调用进行防抖
            if (timerId) {
                clearTimeout(timerId);
            }
            const id = setTimeout(() => {
                callback(...args);
            }, delay);
            setTimerId(id);
        }

        // 当组件卸载或依赖项发生变化时清除定时器
        return () => {
            if (timerId) {
                clearTimeout(timerId);
            }
        };
    }, [callback, delay, ...dependencies, isFirstCall]);

    return debouncedCallback;
};